<template>
  <div id="app">
    <VFormDesigner :designer-config="designerConfig"
                   :field-list-data="fieldListData"
                   :global-dsv="globalDsv"
                   @field-widget-used="handleFWU"
                   @field-widget-removed="handleFWR"
                   @form-json-updated="handleFJU"
                   @saveData="saveData"
                   ref="vfdRef">
      <!--
      <template #customToolButtons>
        <el-button link @click="changeThemePrimaryColor">改色</el-button>
      </template>
      -->
    </VFormDesigner>
  </div>
</template>

<script>
import VFormDesigner from './components/form-designer/index.vue'

export default {
  name: 'App',
  components: {
    VFormDesigner,
  },
  data() {
    return {
      formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
      formData: {},
      optionData: {},

      designerConfig: {
        languageMenu: false,  //是否显示语言切换菜单
        externalLink: false,  //是否显示GitHub、文档等外部链接
        formTemplates: false,  //是否显示表单模板
        componentLib: true,  //是否显示组件库
        chartLib: false,  //是否显示图表库
        metadataLib: false,  //是否显示元数据
        layoutTypeButton: true,  //是否显示表单布局适配按钮组
        eventCollapse: true,  //是否显示组件事件属性折叠面板
        widgetNameReadonly: false,  //禁止修改组件名称

        clearDesignerButton: true,  //是否显示清空设计器按钮
        previewFormButton: true,  //是否显示预览表单按钮
        importJsonButton: true,  //是否显示导入JSON按钮
        exportJsonButton: true,  //是否显示导出JSON器按钮
        exportCodeButton: false,  //是否显示导出代码按钮
        generateSFCButton: true,  //是否显示生成SFC按钮
        logoHeader: false,  //是否显示Logo头部区域（仅Pro）

        toolbarMaxWidth: 450,  //设计器工具按钮栏最大宽度（单位像素）
        toolbarMinWidth: 300,  //设计器工具按钮栏最小宽度（单位像素）

        productName: '',  //自定义表单设计器名称，对应“VForm Pro”（仅Pro）
        productTitle: '',  //自定义表单设计器标题，对应“表单设计器”（仅Pro）

        presetCssCode: '',  //设计器预设CSS样式代码
        languageName: 'zh-CN',  //界面语言，默认显示中文

        resetFormJson: false,  //是否在设计器初始化时将表单内容重置为空
      },

      /* 集成后端字段名称选择功能--演示 */
      fieldListData: {
        fieldList: [
/*          {
            label: '客户名称',
            name: 'accountName'
          },
          {
            label: '手机号',
            name: 'mobilePhone'
          },
          {
            label: '订单明细.产品编号',
            name: 'productNo'
          }*/
        ],
        subFormList: [
          {
            label: '订单明细',
            name: 'orderDetail'
          },
          {
            label: '发货明细',
            name: 'deliveryDetail'
          }
        ]
      },

      //全局数据源变量
      globalDsv: {
        testApiHost: 'http://www.test.com/api'
      },

    }
  },
  computed: {
    //
  },
  methods: {
    doTest() {
      console.info('form data schema is: ' + JSON.stringify( this.$refs.vfdRef.buildFormDataSchema() ))
    },

    changeThemePrimaryColor() {
      const bodyElement = document.getElementsByTagName("body")[0]
      bodyElement.style.setProperty("--vf-color-primary", "red");
      bodyElement.style.setProperty("--el-color-primary", "red");
    },

    handleFWU(fwName) {
      console.info(fwName)
    },

    handleFWR(fwName) {
      console.info(fwName)
    },

    handleFJU(reason) {
    },

    getFromData(){
    },
    saveData(data){
    },

  }
}
</script>

<style lang="scss">
  #app {
    height: 100%;
  }
</style>
